<template>
  <div class="store-container">
    <div class="store-sign yh-layout-box" v-if="signBoard">
      <img :src="URL.PIC+signBoard" width="100%" height="108">
    </div>
    <!--导航-->
    <NavList index="index" v-if="info && goodsClassify" :factoryId="info.id" :classify="goodsClassify" tplVip="vip2"/>
    <!--banner组件-->
    <div class="store-swiperBanner" v-if="banners && banners.length > 0">
      <Carousel :banners="banners" />
    </div>
    <!--统计信息-->
    <Xlist />

    <!--热卖推荐-->
    <hot-sale :sellWell="sellWell" :getFactoryId="factoryId"></hot-sale>
    <!---->
    <!--品类名称-->
    <div class="category-name-wrap">
      <div class="category-name-con" v-for="(item,index) in classifyCustom">
        <!--满减促销专区-->
        <div class="category-name-title">{{ item.classifyName }}</div>
        <div class="category-name-items">
          <div v-for="good in item.goods" @click="routeToPath('/product/'+good.productId, 'new')" class="category-name-item">
            <div class="discount-images"><a href="javascript:void(0)"><img :src="URL.PIC+good.productImage" width="260" height="260" alt=""></a></div>
            <p>{{ good.productTitle }}</p>
            <div class="category-for-sale">
              <span><em>￥</em><b>{{ good.specification.sellingPrice }}</b></span>
              <a href="javascript:void(0)" class="category-buy-button">&nbsp;</a>
            </div>
          </div>
        </div>
        <!--满减促销专区-->
      </div>
    </div>

    <!--公司简介-->
    <div class="company-introduce">
      <div class="company-introduce-con">
        <img src="../../../assets/images/factory/templates/vip1/noble-template_20.jpg" alt="" class="company-introduce-img pull-right">
        <div class="company-introduce-text"  v-if="info">
          <h2>公司简介</h2>
          <p>{{ info.introduction}}</p>
        </div>
      </div>
    </div>
    <!--公共产品区域-->
  </div>
</template>

<script>
import Vue from 'vue';
import NavList from '../components/NavListVip'
import { getFactoryPromotion, getFactoryClassifyCustom, getFactoryProducts, getFactoryBannerSelect, getFactorySignBoard } from '@/api/factory'
import Carousel from '../components/Carousel'
import Xlist from '../components/Xlist'
import hotSale from '../components/hot-sale'

export default {
  props: ['info', 'goodsClassify'],
  components: {
    NavList,
    Carousel,
    Xlist,
    hotSale
  },
  data() {
    return {
      factoryId:this.$route.params.factoryId,
      sellWell: null,
      classifyCustom: [],
      classifyGoods: [],
      banners: null,
      signBoard: null
    }
  },
  created() {
    this.getFactoryPromotion()
    this.getFactorySignBoard()
    this.getFactoryBannerSelect()
    this.getFactoryClassifyCustom()
  },
  methods: {
    // 店招
    getFactorySignBoard() {
      getFactorySignBoard({factoryId: this.factoryId, terminal: 'PC'}).then(res=>{
        this.signBoard = res.data;
      })
    },
    // BANNER
    getFactoryBannerSelect() {
      getFactoryBannerSelect({factoryId: this.factoryId, terminal: 'PC'}).then(res=>{
        this.banners = res.data;
      })
    },
    // 热销商品
    getFactoryPromotion() {
      getFactoryPromotion({factoryId: this.factoryId, positionCode: 'HOTS'}).then(res=>{
          this.sellWell = res.data;
      })
    },
    // 品类
    getFactoryClassifyCustom() {
      getFactoryClassifyCustom({factoryId: this.factoryId}).then(res=>{
        this.getFactoryProducts(res.data)

      })
    },
    // 品类商品
    getFactoryProducts(classifyCustom) {
      for (var idx in classifyCustom) {
        getFactoryProducts({factoryId: this.factoryId,
          classifyId: classifyCustom[idx].classifyId,
          size: 100,
          page: 1,
          sort: 'desc',
        }).then(res=>{
          this.classifyGoods.push(res.data.list)
          setTimeout(()=>{
            this.ProductsList(classifyCustom, this.classifyGoods)
          }, 5)
        })
      }
    },
    // 把品类和商品放在一个数组里面
    ProductsList(classifyCustom, classifyGoods) {
      for (var idx in classifyCustom) {
        classifyCustom[idx].goods = classifyGoods[idx]
      }
      this.classifyCustom = classifyCustom

    }
  }
}
</script>

<style lang="scss" scoped>
  @import '@/styles/pages/template.scss';
</style>
<style lang="css">
  @import "@/styles/pages/template-style.css";
</style>
